import React from 'react';
import { Row, Col } from 'antd';
import './index.less';
import { connect } from 'react-redux';
import Utils from './../../utils/utils';
import api from './../../api/index';

class Header extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userName: '系统管理员',
      sysTime: ''
    }
  }

  componentWillMount() {
    this.setState({
      userName: '系统管理员'
    });

    setInterval(() => {
      let sysTime = Utils.formateDate(new Date().getTime());
      this.setState({
        sysTime
      })
    }, 1000);

    this.getWeatherAPIData();
  }

  getWeatherAPIData() {
    let city = "北京";

    api.jsonp('http://api.map.baidu.com/telematics/v3/weather?location=' + encodeURIComponent(city) + '&output=json&ak=t9X3fdq7vc2U4sElbpqszrCP').then((res) => {
      if (res.status == "success") {
        let data = res.results[0].weather_data[0];
        this.setState({
          dayPictureUrl: data.dayPictureUrl,
          weather: data.weather
        })
      }
    });
  }

  render() {
    return (
      <div className="header">
        <Row className="header_top">
          <Col span="24">
            <span>欢迎，{this.state.userName}</span>
            <a href="#">退出</a>
          </Col>
        </Row>
        <Row className="breadcrumb">
          <Col span="4" className="breadcrumb_title">
            首页
          </Col>
          <Col span="20" className="weather">
            <span className="weather_date">{this.state.sysTime}</span>
            <span className="weather_img">
              <img src={this.state.dayPictureUrl} alt="" />
            </span>
            <span className="weather_datil">
              {this.state.weather}
            </span>
          </Col>
        </Row>
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    menuName: state.menuName
  }
}
export default connect(mapStateToProps)(Header);